import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from "@/common/layer";
import Rate from '@/Components/rate';
import DDView from '@/Components/ddview';
import InlinePicker from '@/Components/inlinepicker';
import ReactSwiper from 'reactjs-swiper';
import axios from 'axios';
import $ from 'jquery';

class Improveinfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tellphone_valid: true,
            code_valid: true,
            tellphone: '',
            second: 0,
            code: ''
        }
        this.valids = [
            {
                key: 'tellphone',
                func(str) {
                    if (str.length !== 11) {
                        layer.open({
                            content: '手机号码格式不正确',
                            btn: '知道了'
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'code',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: '验证码不能为空',
                            btn: '知道了'
                        })
                        return false
                    }
                    return true
                }
            }
        ]
    }

    async beforeSendCode() {
        if (this.state.second !== 0) { return }
        if (this.state.tellphone.length === 0) {
            this.setState({
                tellphone_valid: false
            })
            return
        } else {
            this.setState({
                tellphone_valid: true
            })
        }

        this.setState({
            second: 60
        });

        let time = setInterval(() => {
            if (this.state.second < 1) {
                clearInterval(time)
            } else {
                this.setState({
                    second: this.state.second - 1
                })
            }
        }, 1000)

        let phone = this.state.tellphone
        let res = await axios.get(`${util.host}/auth/code/sms`, {
            params: {
                deviceId: phone,
                phone: phone
            }
        })
        if (res.data.success) {
            layer.open({
                content: '验证码发送成功',
                btn: '好的'
            })
        } else {
            layer.open({
                content: '手机号码格式错误',
                btn: '好的'
            })
        }
    }

    phoneChange(e) {
        this.setState({
            tellphone: e.target.value
        })
    }

    codeChange(e) {
        this.setState({
            code: e.target.value
        })
    }

    async beforeSubmit() {
        this.setState({
            second: 0,
        })
        for (let item of this.valids) {
            if (!item.func(this.state[item.key])) {
                this.setState({
                    [item.key + '_valid']: false
                })
                return;
            } else {
                this.setState({
                    [item.key + '_valid']: true
                })
            }
        }

        let sendobj = {
            phone: this.state.tellphone,
            smsCode: this.state.code,
            openId: sessionStorage.getItem("openid")
            //openId: 'odPDN0Rom1s7lZPMrDv51k_8_WHw'
        }

        let res = await axios.post(`${util.host}/prizeUser/insertPrizeUser${util.obj2query(sendobj)}`).catch((e) => {
            if (e) {
                layer.open({
                    content: '用户不存在',
                    btn: "好的"
                })
            }
        })

        if (res) {
            if (res.data.msg === "操作成功") {
                this.issubscribe()
            } else {
                layer.open({
                    content: res.data.msg,
                    btn: '知道了'
                })
            }
        }
    }

    async issubscribe() {
        var openid = sessionStorage.getItem("openid")
        // var openid = 'odPDN0Rom1s7lZPMrDv51k_8_WHw'
        let res = await util.rjax({
            url: '/wxAuthenticate/isSubscribe?openId=' + openid,
            type: 'post',
        })
        if (res.subscribe && res.subscribe === 1) {
            this.setState({ tellphone: '' });
            this.setState({ code: '' });
            //已关注
            layer.open({
                content: "提交成功，将有客服人员联系您",
                btn: '好的'
            })
        } else {
            //还未关注，跳转二维码
            layer.open({
                content: "提交成功，可以领取奖品了",
                btn: '好的',
                yes: () => {
                    window.location.href = `./qrcode.html`;
                }
            })

        }
    }

    render() {

        return (
            <div>
                <div id="improveinfo">
                    <input type="text" className="text" placeholder="请输入手机号" style={{ borderColor: (this.state.tellphone_valid) ? '#e6e6e6' : '#ff0000' }} value={this.state.tellphone} onChange={this.phoneChange.bind(this)} maxLength="11" />
                    <div style={{ position: "relative" }}>
                        <input type="text" className="text" placeholder="请输入验证码" style={{ borderColor: (this.state.code_valid) ? '#e6e6e6' : '#ff0000' }} value={this.state.code} onChange={this.codeChange.bind(this)} />
                        <input type="button" className="yzbtn" value={(this.state.second === 0) ? '获取验证码' : `剩余${this.state.second}秒`} onClick={this.beforeSendCode.bind(this)} />
                    </div>
                    <input type="button" className="btn" value="提交" onClick={this.beforeSubmit.bind(this)} />

                </div>
            </div>
        )
    }
}
ReactDom.render(<Improveinfo />, document.getElementById("app"));